<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>会员登录</title>
		<link rel="icon" href="//s01.mifile.cn/favicon.ico"/>
		<link rel="stylesheet" type="text/css" href="./css/login.css">
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="js/web.js" ></script>
	</head>
	<body>
		<!-- login -->
		<div id="div1" style="position: relative;">
		<div class="top center">
			<div class="logo center">
				<a href="./index.html" target="_blank"><img src="./image/mistore_logo.png" alt=""></a>
			</div>
		</div>
		
		
		<div  id="topdiv" >
		<form  method="post"  class="form center">
		<div class="login">
		
			<div class="login_center">
					
				<div class="login_top">
					<div @click="dissee" class="left fl">会员登录</div>
					<div class="left fl">|</div>
					<div @click="cansee" class="left flr">手机登录</div>
					<div class="right fr">您还不是我们的会员？<a href="./register.html" target="_self">立即注册</a></div>
					<div class="clear"></div>
					
					<div class="xian center"></div>
					
				</div>
				
				<div class="login_main center">
					<h5 align="center" id="tishikuang" style="line-height:10px; color: red; font-size: medium;">{{message}}</h5>
					<div class="username">用户名:&nbsp;<input class="shurukuang" v-model="name66" type="text" name="username" placeholder="请输入你的用户名"/></div>
					<div class="username">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;<input class="shurukuang" v-model="pass88" type="password" name="password" placeholder="请输入你的密码"/></div>
					<div class="username">
						<div class="left fl">验证码:&nbsp;<input class="yanzhengma" v-model="check99" type="text" name="username" placeholder="请输入验证码"/></div>
						<div class="right fl"><img  v-on:click="change" v-bind:src="web_check_code" /></div>
						<div class="clear"></div>
					</div>
				</div>
				<div class="login_submit">
					<input class="submit" type="button" @click="setTimer" v-on:click="init" @click="setTimer" name="submit" value="立即登录" >
				</div>
				
			</div>
			
		</div>
		</div>
		</form>

		
		<div v-show="show" id="downdiv">
	
		<div class="login2" style="position: absolute; left: 85px;">
			<div class="login_center">
				<div class="login_main center">
					<h5 align="center" id="tishikuang" style="line-height:10px; color: red; font-size: medium;">{{message}}</h5>
					<div class="username">手机号:&nbsp;<input class="shurukuang" v-model="phone66" type="text" name="username" placeholder="请输入你的手机号"/></div>
					
					<div class="username">
						<div class="left fl">验证码:&nbsp;<input class="yanzhengma" v-model="phonein" type="text" name="username" placeholder="请输入验证码"/></div>
						<div class="right fl"><input type="button" v-on:click="phoneget()" onclick="settime(this)" style="width: 100px; height: 30px;" value="获取验证码"></input></div>
						
					</div>
				</div>
				<div class="login_submit">
					<input class="submit" @click="setTimer" id="denglu1" type="button" v-on:click="init2" name="submit" value="立即登录" >
				</div>
			
			</div>
			
		</div>
	
		</div>
		
		</div>
			</div>	
		<footer>
			<div class="copyright">简体 | 繁体 | English | 常见问题</div>
			<div class="copyright">小米公司版权所有-京ICP备10046444-<img src="./image/ghs.png" alt="">京公网安备11010802020134号-京ICP证110507号</div>

		</footer>
	</body>
	<script type=" text/javascript">
	
		var vue=new Vue({
			el:"#div1",
			data:{
				name66:"",
			    pass88:"",
			    check99:"",
			    show:false,
			    phone66:"",
			    phonein:"",
			    message:"",
			    timer:null,
			    numberdaoji:2,
			    username:"",
			    userid:"",
			    zhengwang:"",
			    web_check_code:window.web_check_code,
			    web_server:window.web_server
			},
			methods:{
				init:function(){
					var self=this;
					var params=new URLSearchParams();
					params.append("userName",self.name66),
					params.append("password",self.pass88),
					params.append("code",self.check99),
					axios.defaults.withCredentials=true;
					axios.post(web_server+"api/user/login",params)
					  .then(function (response) {
					    var object=response.data;
					     if(self.name66==""){
						self.message="请输入用户名，用户名不能为空";
						return false;
						}
					    if(self.name66.length<2){
						self.message="用户名长度必须大于等于2位";
						return false;
						}
						if(self.pass88==""){
						self.message="请输入密码，密码不能为空";
						return false;
						}
						if(self.pass88.length<=5){
						self.message="密码长度不能小于六位";
						return false;
						}
					   if(object.status==200){
					   	self.userid=object.data[0].userId;
					   	self.username=object.data[0].userName;
					   	window.sessionStorage.setItem("loginUserid",self.userid);
					   	window.sessionStorage.setItem("loginUsername",self.username);
					    self.message="登录成功自动跳转";
					   	window.location.href="index.html";
					   }
					  if(object.status==404){
							self.message=object.message;
						}
						if(object.status==500){
							self.message="验证码错误，请您重新输入";
						}
					  })
					  .catch(function (error) {
					    console.log(error);
					  });
				},
				change:function(){
				 
					this.web_check_code=this.web_check_code+"?"+Math.random();
				},
				dissee:function(){
				this.show=false;
				},
				cansee:function(){
				this.show=true;
				},
				phoneget:function(){
					var self=this;
					var params=new URLSearchParams();
					params.append("telphone",self.phone66),
					axios.defaults.withCredentials=true;
					axios.post(web_server+"api/user/telLogin",params)
					  .then(function (response) {	  
					    var object=response.data;		
//						alert(self.phonein);
					   if(object.status==200){
//					   	alert( JSON.stringify(object))
					   	self.message="验证码获取成功";
					   self.zhengwang=object.data[1].code;
					   self.userid=object.data[0].userId;
					   self.username=object.data[0].userName;					  	
					   }
					  if(object.status==404){				  	
							self.message=object.message;
							this.timer=setInterval(() => {
				　　　　　　	window.location.reload();
						}, 1500)
							
						}
						if(object.status==500){
							self.message=object.message;
						}
					  })
					  .catch(function (error) {
					    console.log(error);
					  });
				},
				init2:function(){
					 var self=this;
					    if(self.phone66==""){
						self.message="请输入手机号，手机号不能为空";
						return false;
						} 
					       if(self.phone66.length<10){
						self.message="手机号长度必须为11位";
						return false;
						}
						if(self.phonein==""){
						self.message="请输入验证码，验证码不能为空";
						return false;
						}
						if(self.phonein.length<=5){
						self.message="验证码长度不能小于六位";
						return false;
						}
					if(self.zhengwang!=self.phonein){
						self.message="您输入的短信验证码不正确，请您重新输入";
						return false;
					}
					if((self.zhengwang==self.phonein)&&self.zhengwang.length>=4){
						 window.sessionStorage.setItem("loginUserid",self.userid);
						window.sessionStorage.setItem("loginUsername",self.username);
						window.location.href="index.html";
					}
								},
					setTimer:function(){
				            var self=this;
				　　　　this.timer=setInterval(() => {
				　　　　　　　　self.numberdaoji--;
				       if(self.numberdaoji==0){
				  
				       	  self.message="";
				       	  self.numberdaoji=4;
				       }
				
				}, 1000)
				
			}
		}
	})
		var countdown=60;
		function settime(obj) {
		    if (countdown == 0) {
		        obj.removeAttribute("disabled");   
		        obj.value="免费获取验证码";
		        countdown = 60;
		        return;
		    } else {
		        obj.setAttribute("disabled", true);
		        obj.value="重新发送(" + countdown + ")";
		        countdown--;
		    }
		setTimeout(function() {
		    settime(obj) }
		    ,1000)
		}
	</script>
</html>